<template>
    <div>
        <a-card>
            <a-button type="primary" @click="addBlog">添加帖子</a-button>
            <a-table :columns="columns" :data-source="page.list" rowKey="blogId" bordered :pagination="false"
                :loading="loading">
                <template #bodyCell="{text,column,record, index}">
                    <template v-if="column.key === 'num'">
                        {{ (page.currentPage - 1) * page.pageSize + parseInt(index) + 1 }}
                    </template>
                    <template v-else-if="column.key === 'isTop'">
                        <a-switch v-model:checked="isTopState[index]" :disabled="disableTop"
                            @change="enableTop(record.blogId, isTopState[index])" />
                    </template>
                    <template v-else-if="column.key=== 'blogImage'">
                        <a-avatar :size="64" icon="user" :src="text" />
                    </template>
                    <template v-else-if="column.key === 'operation'">
                        <div class="editable-row-operations">
                            <a-button type="primary" @click="handleBlogEdit(record.blogId)">
                                修改
                            </a-button>
                            <a-button type="link" @click="handleBlogRead(record.blogId)">
                                查看
                            </a-button>
                        </div>
                    </template>
                </template>
            </a-table>
            <a-pagination v-model="page.currentPage" :page-size-options="['5', '10', '20', '50']" :total="page.totalCount"
                show-size-changer :page-size="page.pageSize" @showSizeChange="onSizeChange" @change="onPageChange">
                <template #buildOptionText="props">
                    <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                    <span v-if="props.value === '50'">全部</span>
                </template>
            </a-pagination>
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { IPage, IResult } from '@/types';
import { blogColumn as columns } from '@/mock/table';
import {
    getBlogByPage,
    enableBlogTop
} from '@/api/Content';
import { ResultCodeEnum } from '@/enums';

const router = useRouter();

const loading = ref(true);
const disableTop = ref(false);
const page = ref({
    currentPage: 1, // 当前页
    index: 0,
    pageSize: 5, // 每页显示条数
    totalPage: 0, // 总页数
    totalCount: 0, // 总条数
    params: {}, // 查询参数对象
    list: [], // 数据
    sortColumn: '', // 排序列
    sortMethod: 'asc', // 排序方式
});

const isTopState = ref<boolean[]>([]);

const calcTopState = () => {
    const { currentPage, pageSize, totalCount } = page.value;
    let realCount = totalCount - (currentPage * pageSize);
    realCount = realCount < pageSize ? realCount : pageSize;
    for (let i = 0; i < realCount; i++) {
        if ((page.value.list[i] as unknown as any).isTop === 1) {
            isTopState.value[i] = true;
        } else {
            isTopState.value[i] = false;
        }
    }
};

onMounted(() => {
    fetchBlogData();
});

// 分页加载博客列表数据
const fetchBlogData = async () => {
    const res = await getBlogByPage(page.value) as IResult;
    if (res.code !== ResultCodeEnum.QUERY_SUCCESS)
        return message.error('查询出错');
    page.value = res.data
    calcTopState();
    loading.value = false
    // message.success(res.msg)
}
const onPageChange = (newPage: number) => {
    page.value.currentPage = newPage
    fetchBlogData()
}
// 页面变化
const onSizeChange = (current: number, newSize: number) => {
    page.value.pageSize = newSize;
    fetchBlogData()
}
// 初始化加载列表
// initData() {
//     this.columns = columns
// },

// 开启文章置顶
const enableTop = async (id: string, status: boolean) => {
    let state = status ? 1 : 0
    const { code, msg } = await enableBlogTop(state, id) as IResult;
    if (code !== ResultCodeEnum.UPDATE_SUCCESS)
        return message.error(msg)
    disableTop.value = true
    setTimeout(() => {
        disableTop.value = false
    }, 1500);
    message.success(msg)
}
// 添加帖子
const addBlog = () => {
    router.push('/content/blog/edit')
}
// 查看帖子
const handleBlogRead = (id: string) => {
    router.push(`/content/blog/detail?blogId=${id}`)
}
// 修改帖子
const handleBlogEdit = (id: string) => {
    router.push(`/content/blog/edit?blogId=${id}`)
}

</script>


